<template>
  <el-card class="box-card">
    <!-- 头部 -->
    <div v-if="isSubjects" slot="header" class="clearfix">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subjectName }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 内容 -->
    <div class="container">
      <!-- 头部 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="2" :xl="1"
            ><div class="lable-name">便签名称</div></el-col
          >

          <el-col :xs="24" :sm="3" :xl="3">
            <el-input v-model="form.tagName"></el-input
          ></el-col>

          <el-col :xs="24" :sm="2" :xl="1"
            ><div class="lable-name">状态</div></el-col
          >
          <el-col :xs="24" :sm="3" :xl="3">
            <el-select v-model="form.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option> </el-select
          ></el-col>

          <el-col :xs="24" :sm="5" :xl="4">
            <el-button size="small" @click="resetForm('form')">清除</el-button>
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
          </el-col>

          <el-col :xs="24" :sm="9" :xl="12"
            ><div class="el-col-add-btn">
              <el-button v-if="isSubjects" type="text" @click="$router.go(-1)">
                <i class="el-icon-back"></i> 返回学科</el-button
              >
              <el-button
                type="success"
                size="small"
                @click="dialogFormVisible = true"
                ><i class="el-icon-edit"></i>新增标签</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-form>
      <!-- 提示 -->
      <el-alert
        :closable="false"
        :title="`数据一共${total}条`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column width="80" type="index" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="150">
        </el-table-column>
        <el-table-column prop="tagName" label="便签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="{ row: { addDate } }">
            <span>{{ addDate | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              @click="changeState(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.state === 1 ? "禁用" : "启用" }}</el-button
            >
            <el-button
              v-show="scope.row.state === 0"
              type="text"
              size="small"
              @click="changeDate(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              v-show="scope.row.state === 0"
              type="text"
              size="small"
              @click="delDate(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              v-show="scope.row.state === 1"
              type="text"
              size="small"
              disabled
              >修改</el-button
            >
            <el-button
              v-show="scope.row.state === 1"
              type="text"
              size="small"
              disabled
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="prev, pager, next,sizes, jumper"
        :total="total"
        :hide-on-single-page="value"
      >
      </el-pagination>

      <!-- dialog -->
      <my-dialog
        :dialogFormVisible.sync="dialogFormVisible"
        :isChangeDate.sync="isChangeDate"
        :list="subjectList"
        :isSubjects="isSubjects"
        @myConfirm="confirm"
        :id.sync="subjectID"
        :cData="cData"
        :cID="cID"
      ></my-dialog>
    </div>
  </el-card>
</template>

<script>
import { list, changeState, add, update, remove } from '../../api/hmmm/tags.js'
import { simple } from '../../api/hmmm/subjects.js'
import MyDialog from '../components/tags-add.vue'
export default {
  components: { MyDialog },
  name: 'Tags',
  data () {
    return {
      // 是否学科跳转
      isSubjects: false,
      // 是否修改
      isChangeDate: false,
      // 要修改的数据
      cData: {},
      cID: -1,
      form: {
        // 标签名称
        tagName: null,
        // 状态 1 开启 0 屏蔽
        state: null
      },
      // 学科ID
      subjectID: null,
      // 学科name
      subjectName: '',
      // 列表数据
      tableData: [],
      // 页码 条目数
      page: 1,
      pagesize: 10,
      // total 总条目数
      total: 11,
      value: false,
      // 弹出框
      dialogFormVisible: false,
      // 学科列表
      subjectList: []
    }
  },
  //
  created () {
    // 获取地址栏参数
    // console.log(this.$route.query.id)
    // 判断是否学科跳转
    if (this.$route.query.id) {
      this.isSubjects = true
      // 获取学科id
      this.subjectID = this.$route.query.id
      // this.subjectID = 4
      // 获取学科name
      this.subjectName = this.$route.query.name
      // this.subjectName = '前端'
    }
    this.getList()
    // 学科简单列表
    this.getListSimple()
  },
  methods: {
    // 请求列表数据
    async getList () {
      const { tagName, state } = this.form
      const params = {
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.subjectID,
        tagName,
        state
      }
      const { data } = await list(params)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
      if (this.total <= this.pagesize) this.value = !this.value
    },
    // 学科列表
    async getListSimple () {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    },
    // 启用/禁用
    async changeState (row) {
      const data = {
        id: row.id,
        state: row.state
      }

      try {
        if (row.state === 1) row.state = 0
        else row.state = 1
        await changeState(data)
        this.$message.success('修改状态成功!')
      } catch (error) {
        console.warn(error)
        if (row.state === 1) row.state = 0
        else row.state = 1
        this.$message.error('修改状态失败!')
      }
    },
    // changeDate修改
    async changeDate (i, row) {
      // console.log(row)
      const { subjectID, tagName } = row
      this.isChangeDate = !this.isChangeDate
      this.cData = {
        subjectID: subjectID,
        tagName: tagName
      }
      this.cID = row.id
      this.dialogFormVisible = true
    },
    // 删除
    delDate (i, row) {
      const data = {
        id: row.id
      }
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(data)
          this.$message.success('删除成功!')
          this.getList()
        } catch (error) {
          console.warn(error)
          this.$message.error('删除失败!')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 每页条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.resetForm()
      this.page = 1
      this.pagesize = val
      this.getList()
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.resetForm()
      this.page = val
      this.getList()
    },
    // 重置
    resetForm (formName) {
      // this.$refs.form.resetFields()
      this.form = {
        // 标签名称
        tagName: null,
        // 状态 1 开启 0 屏蔽
        state: null
      }
      /* this.from.tagName = null
      this.from.state = null */
    },
    // search搜索
    search () {
      this.page = 1
      this.getList()
    },
    // 确定 : 弹出框自定义事件
    async confirm (data, flag) {
      // console.log('父组件响应')
      if (flag) {
        // console.log('添加标签')
        try {
          await add(data)
          this.$message.success('添加成功!')
          this.resetForm()
          this.page = 1
          this.getList()
        } catch (error) {
          console.warn(error)
          this.$message.error('添加失败!')
        }
      } else {
        // console.log('修改标签')
        try {
          await update(data)
          this.$message.success('修改成功!')
          this.getList()
        } catch (error) {
          console.warn(error)
          this.$message.error('修改失败!')
        }
      }
      // console.log(data)
    }

  }
}
</script>

<style lang="less" scoped >
.box-card {
  margin: 10px;
  font-size: 14px;
}

.el-col {
  position: relative;
  height: 32px;
  line-height: 32px;
}
.el-col-add-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.lable-name {
  text-align: right;
  color: #606266;
  font-weight: 700;
}

/depp/ .grid-content {
  min-height: 32px;
}
.el-input--medium /deep/ .el-input__inner {
  height: 32px;
  line-height: 32px;
}

/deep/ .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
/* 提示 */
.el-alert {
  margin-top: 20px;
  margin-bottom: 16px;
}
/* 分页 */
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
